<template>
    <div>
        <BreadCrumb></BreadCrumb>

        <!-- 查询区域 -->
        <div class="head" id="heads">
            <el-form ref="isForm" :inline="true" :model="formQuery" class="demo-form-inline" size="mini">
                <el-row :gutter="10">
                    <el-col :span="6">
                        <el-form-item label="订单编号" prop="Bianhao">
                            <el-input v-model="formQuery.Bianhao" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="预定时间">
                            <el-col :span="11">
                                <el-form-item prop="bingTime">
                                    <el-date-picker type="date" placeholder="选择日期" v-model="formQuery.bingTime"
                                        style="width: 100%;"></el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="2" style="text-align: center;">至</el-col>
                            <el-col :span="11">
                                <el-form-item prop="endTimg">
                                    <el-date-picker type="date" placeholder="选择日期" v-model="formQuery.endTimg"
                                        style="width: 100%;"></el-date-picker>
                                </el-form-item>
                            </el-col>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item>
                            <el-button type="primary" @click="getQueryLists()">查询</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="reset">重置</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="10" style="width: 76%;">
                    <el-col :span="8">
                        <el-form-item label="下单人" prop="placePerson">
                            <el-input v-model="formQuery.placePerson" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="所属单位" prop="unit">
                            <el-input v-model="formQuery.unit" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="汇总状态" prop="state">
                            <el-select v-model="formQuery.state" placeholder="请选择活动区域">
                                <el-option label="全部" value="2"></el-option>
                                <el-option label="未汇总" value="0"></el-option>
                                <el-option label="已汇总" value="1"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div class="btn-box" style="display: flex;">
                <el-button type="warning" size="small" @click="report">订单汇总</el-button>
                <!-- 导出下载表格 -->
                <download-excel :data="excelData" :fields="json_fields" header="生鲜后台管理系统"
                    name="订单表格.xls" style="margin-left: 20px;">
                    <el-button type="warning" @click="exportOrder" size="small">导出</el-button>
                </download-excel>
            </div>
        </div>
        <!-- 内容区域 -->
        <div class="content">
            <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
                @select="handleSelectionChange" @select-all="handleSelectionChange" :border="true"
                header-cell-class-name="active-head" cell-class-name="row-style">
                <el-table-column type="index" width="55" />
                <el-table-column type="selection" width="55" :selectable="selectableFun" />
                <el-table-column label="订单编号" width="120">
                    <template v-slot="{ row }">
                        <a href="#" @click="goDetaile(row)">{{ row.Bianhao }}</a>
                    </template>
                </el-table-column>
                <el-table-column prop="placePerson" label="下单人" width="120" />
                <el-table-column prop="unit" label="所属单位" width="200" />
                <el-table-column prop="phoneNumber" label="联系电话" width="200" />
                <el-table-column prop="dueTime" label="预定时间" width="200" />
                <el-table-column prop="totalValue" label="订单总价格" width="200" />
                <el-table-column label="汇总状态">
                    <template v-slot="{ row }">
                        <span>{{ row | getState }}</span>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="paginat rbt">
                <Paginats :total="total" :page-size="pageSize" @handleCurrentChange="handleCurrentChange"></Paginats>
            </div>
        </div>
        <!-- Draw 抽屉弹框 -->
        <Draw ref="draw"></Draw>
    </div>
</template>
<script>
import { mapMutations } from 'vuex'
import Draw from './component/drawer.vue'
import Paginats from '@/components/pagination/pagination.vue'
import { getLists, postHuiZong, getDetailList } from '@/api/request/order/index'
import dayjs from 'dayjs'

export default {
    name: 'order-list-page',
    components: {
        Paginats,
        Draw
    },
    filters: {
        getState: val => val.state == 0 ? '未汇总' : '已汇总'
    },
    data() {
        return {
            formQuery: {
                Bianhao: '',
                bingTime: '',
                endTimg: '',
                placePerson: '',
                unit: '',
                state: '全部'
            },
            tableData: [],
            total: 0,
            pageSize: 10,
            currentPage: 1,
            selectStrIds: '',
            excelData: [],
            json_fields: {
                // '订单编号':'Bianhao',
                "订单编号": {           // 处理bug：因过长导致excel表格展示有误
                    field:'Bianhao',
                    callback: value => "&nbsp;" + value
                },
                "下单人": 'placePerson',
                "所属单位": 'unit',
                "联系电话": 'phoneNumber',
                "预定时间": 'dueTime',
                "订单总价格": 'totalValue',
                "汇总状态": 'state',
            },
            selectArr:[]
        }
    },
    created() {
        this.getQueryLists()
    },
    methods: {
        ...mapMutations('orderDetaile', ['getQueryData']),
        // 获取列表数据
        async getQueryLists() {
            this.formQuery.state = this.formQuery.state == '全部' ? '2' : this.formQuery.state
            let params = { pageNumber: this.currentPage, pageSize: 10, ...this.formQuery }
            console.log('params====', params);
            const res = await getLists('/order-list', params)
            if (res.code != 200) return this.$message.error('error')
            this.tableData = res.datas
            this.total = res.total
        },
        reset() {
            this.$refs.isForm.resetFields()
        },
        async report() {
            if (!this.selectStrIds.includes(',')) return this.$message.warning('must have two datas!')
            let res = await postHuiZong('/huizong', { ids: this.selectStrIds })
            console.log('res---', res);
            if (res.code != 200) return this.$message.error('error')
            this.$message.success('汇总成功')
            this.getQueryLists()
        },
        exportOrder() {
            if(this.tableData.length == 0 && this.selectArr.length == 0) return this.$message.error('暂无数据需要导出!')
            if(this.selectArr.length != 0) return this.excelData = this.selectArr  // 单数据导出
            this.tableData.forEach(item => {  // 整页数据导出
                item.state = item.state == 0 ? '未汇总':'已汇总'
                item.dueTime = dayjs(item.dueTime).format('YYYY-MM-DD')
            })
            this.excelData = this.tableData
        },
        handleSelectionChange(arrs) {
            let strIds = ''
            arrs.forEach(item => strIds = item.id + ',' + strIds)
            this.selectStrIds = strIds.slice(0, -1)

            this.selectArr = arrs
        },
        handleCurrentChange(page) {
            this.currentPage = page
            this.getQueryLists()
        },
        selectableFun(row) {
            return row.state == 1 ? false : true
        },
        goDetaile(row) {
            // 方法一 打开抽屉组件
            row.state = row.state == 0 ? '未汇总' : '已汇总'
            let draw = this.$refs.draw
            draw.formQuery = row
            draw.show = true
            this.getDetailLists(row.id, draw)  //  接口拿到表格数据和底部数据
            this.activeWidth(draw)   // 动态设置抽屉宽度

            // 方法二 打开页面
            // this.getQueryData(row)
            // this.$router.push({ path: 'order-list/detaile', query: { id: row.id } })  
        },
        async getDetailLists(id, draw) {
            let res = await getDetailList('/detail-list', { ids: id })
            if (res.code != 200) return this.$message.error('error')
            draw.tableData = res.datas
            draw.footForm = res.footer
        },
        activeWidth(draw) {
            let wid = document.getElementById('heads').offsetWidth  // 获取指定元素的宽度
            draw.size = wid + 20 + 'px'
        }

    }
}
</script>
<style scoped lang="less">
.content {
    background-color: #fff;

    /deep/ .active-head {
        color: #333;
        text-align: center;
    }

    /deep/ .row-style {
        text-align: center;
    }

    .gd-name {
        cursor: pointer;
        color: #1E90FF;
    }
}

.rbt {
    text-align: right;
}
</style>